Julia Wirth UI/UX Webportfolio

Informationen

ÜBER DAS PROJEKT

Konzeption und Realisierung eines Webauftritts in Form einer Progressive Web App für das Programm 'Ocean Friendly Restaurants' der Surfrider Foundation Germany, im Rahmen des Bachelormoduls Web Engineering. Das Projekt wurde innerhalb eines halben Jahres erstellt (März 2019 - Juli 2019).

Zur Website

Auftraggeber

Surfrider Foundation Europe

Übernommene Aufgabenbereiche

Konzeption | Prototyping | UI Design | Icondesign

Team

Franziska Greiner | Krzysztof Linkowski |
Laura Meier | Marcel Walter | Julia Wirth

Tools

Adobe XD | Adobe Illustrator | Adobe Photoshop | Visual Studio Code (mit Ionic + Angular + NoSQL)

Konzept

Zielsetzung

Im Rahmen des Praxisprojekts im Schwerpunkt Medieninformatik im Bachelor, hat unser Team die Surfrider Foundation kontaktiert, die uns das Programm 'Ocean Friendly Restaurants' vorgestellt hat. Das Ziel dieser Stiftung ist es, aktiv gegen die Verschmutzung der Ozeane vorzugehen und nachhaltige Restaurants, Cafés, Bars und andere Gastronomien auszuzeichnen.
Unter Absprache des Stiftungsvorsitzenden entschieden wir uns dafür, im Rahmen unseres Praxisprojekts, eine Progressive Web App für ihr Programm zu erstellen, um dieses wichtige Themengebiet zu unterstützen.

Vorgehensweise

Entwicklungsprozess

Jeder Schritt des Entwicklungsprozesses wurde mit der Surfrider Foundation abgestimmt. Es war uns wichtig, ein Ergebnis zu erzielen, das im Anschluss Anwendung findet.

1. Research

Zuerst wurde die Zielgruppe definiert und eine Nutzeranalyse durchgeführt.

2. Konzeption

Anschließend wurden User Flows und erste Skizzen erstellt, als Grundlage für die Konzeption von Wireframes, die als Basis für das Design der App dienten.

3. Design

Anhand der Konzeption konnte im Anschluss das Screendesign der PWA erstellt werden.

4. Entwicklung

Abschließend konnte das zuvor erstellte Design, mittels HTML, CSS und JavaScript, sowie den Framewords Ionic und Angular entwickelt werden.

Vorgehensweise

Einblick in den Entwicklungsprozess

Konzeptübersicht

Zuerst wurde ein Konzept für die Ausarbeitung der Inhalte der Surfrider Foundation erstellt. Dabei entschieden wir uns für eine Progressive Web App, da es bis dato keine Website für Ocean Friendly Restaurants in Deutschland gab und wir den Vorteil dabei sahen, dass Interessierte die Restaurants, durch die Möglichkeit, die PWA auf dem Smartphone zu speichern, jederzeit und schnell auffinden können.

Ergebnis:

Erstellung einer Progressive Web App
2 Zielgruppen: Gastronomien & Restaurant-Besucher
5 Navigationspunkte

Mobile Ansicht Design

Danach wurde das Designkonzept für die mobile Ansicht erstellt. Beim Design konnten wir uns etwas an der bereits existierenden Website von Ocean Friendly Restaurants Hawaii orientieren, dennoch wurden alle Inhalte von uns selbst erstellt, recherchiert und aufbereitet. Wir hatten lediglich einen Styleguide für Farbe, Schrift und Logo von der Surfrider Foundation ausgehändigt bekommen.

Infos:

Zuerst wurde eine grobe Skizze angefertigt.
Danach wurde Adobe XD für die Konzeption verwendet.
Alle Inhalte inkl. Bilder wurden selbst aufbereitet.

Webansicht Design

Nachdem die Konzeption der mobilen Ansicht abgeschlossen war, widmete sich das Designteam, um die Konzeption der Webansicht, während das Entwicklungsteam anfing, die mobile Ansicht zu programmieren.

Zuerst wurde eine grobe Skizze angefertigt.
Danach in Adobe XD übertragen.
Alle Inhalte inkl. Bilder wurden selbst aufbereitet.

Ergebnis

Progressive Web App

Das Ergebnis dieser Arbeit stellt die die folgende Website dar, die sich hinter dem Button befindet. Einen Einblick in die mobile Ansicht der PWA, befindet sich unterhalb in der Gallerie.

Zur Website